<script>
export default {
  data() {
    return {
      message: 'helloworld',
      age: 0,
    }
  },
  methods: {
    reverseMessage() {
      console.log('methods')
      return this.message.split('').reverse().join('')
    },
  },
  computed: {
    //计算属性，只要依赖值不变，他的值不会变，不会重新计算。
    // 简写形式
    // reverseMsg() {
    //     console.log("计算属性computed");
    //     return this.message.split('').reverse().join('');
    // }

    // 完整形式，对象。
    // 每一个计算属性都有一个getter和setter,默认执行的就是getter方法
    // 不需要加括号，是因为它会自动调用get方法。
    reverseMsg: {
      get() {
        this.message.split('').reverse().join('')
      },
      // 完整写法
      // get: function(){

      // }

      // 计算属性，一般不写set方法，计算属性是只读属性。
      set(newValue) {
        console.log(newValue)
      },
      // 完整写法
      // set: function(){

      // }
    },
  },
}
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <!-- 第一种：js表达式 -->
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <p>{{ message.split('').reverse().join('') }}</p>
    <!-- message.split('')将它分割成数组，然后翻转然后再拼接。 -->

    <!-- 第二种：计算属性 -->
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <p>{{ reverseMsg }}</p>
    <!-- reverseMsg本来是一个方法，但是通过{{}}和属性来调用。 -->
    <!-- 这里的属性是指。比如message可以直接{}出来，reverseMsg这里也可以。 -->
    <!-- 所以这叫计算属性。 -->
    <!-- 计算属性有缓存功能，很能节约带宽的 -->

    <!-- 第三种：使用methods中的方法 -->
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>
    <p>{{ reverseMessage() }}</p>

    <button @click="message = '你好'">改变message</button>
    <button @click="reverseMsg = '你好'">改变reverseMsg</button>
  </div>
</template>

<style></style>
